import React, { useMemo } from 'react';
import { useModel } from 'umi';
import { Tag } from 'antd';

export type TagTagProps = {
  value: string | undefined;
};

export const TagTag: React.FC<TagTagProps> = (props) => {
  if (!props.value || props.value == '') {
    return null;
  }

  const { getTag } = useModel('useGlobalModel', (model) => ({
    getTag: model.getTag,
  }));

  const renderTag = useMemo(() => {
    const { value } = props;

    const tag = getTag(value);
    if (tag) {
      return (
        <Tag color="blue" key={tag.id} title={tag.name}>
          {tag.name}
        </Tag>
      );
    }
    return null;
  }, [props.value]);

  return <>{renderTag}</>;
};

export type TagTagsProps = {
  values: string[] | undefined;
};

const TagTags: React.FC<TagTagsProps> = (props) => {
  if (!props.values || props.values.length < 1) {
    return null;
  }

  const renderTags = useMemo(() => {
    return props.values?.map((item) => (
      <TagTag key={item} value={item}></TagTag>
    ));
  }, [props.values]);

  return <>{renderTags}</>;
};

export default TagTags;
